<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>echarts</title>
    <style>
      .chart {
        width: 800px;
        height: 400px;
        background-color: rgba(0, 0, 0, 0.2);
      }
    </style>
  </head>
  <body>
    <!-- 2. 准备具备宽高的DOM容器 -->
    <div class="chart"></div>
    <!-- 1. 引入echarts的js文件 -->
    <script src="./echarts.js"></script>
    <script>
      // 入门教程：https://echarts.apache.org/handbook/zh/get-started/
      // 3. 初始化echarts的实例
      const myChart = echarts.init(document.querySelector(".chart"));
      // 4. 定义图表选项
      const option = {
        // 标题
        title: {
          text: "柱形图",
          // https://echarts.apache.org/zh/option.html#title.left
          // left: "center",
        },
        // x轴
        xAxis: {
          data: ["服饰", "数码", "箱包", "食品"],
        },
        // y轴
        yAxis: {
          axisLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
        },
        // 系列：指定图表的类型、样式、数据
        series: [
          {
            name: "柱形图",
            type: "bar",
            data: [100, 120, 80, 180],
          },
          {
            name: "折线图",
            type: "line",
            data: [100, 120, 80, 180],
          },
          {
            name: "饼图",
            type: "pie",
            data: [
              {
                name: "xx",
                value: 111,
              },
              {
                name: "yy",
                value: 222,
              },
              {
                name: "zz",
                value: 333,
              },
            ],
            radius: [0, 30],
            center: ["80%", 40],
          },
        ],
        // 提示框：提示数据
        tooltip: {},
        // 图例：显示隐藏图表
        legend: {
          data: ["柱形图", "折线图", "饼图"],
        },
        // 工具箱：下载、刷新等功能
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        // 区域缩放
        dataZoom: {},
        // 布局
        grid: {
          left: 10,
          right: 10,
          containLabel: true,
        },
      };
      // 5. 渲染图表
      myChart.setOption(option);
    </script>
  </body>
</html>
